<template>
<div class="main">
  <div class="top" ref="top">
      <div class="title">
        <div class="logo">
          <img :src="logo" alt="新乡职业技术学院" />
        </div>
        <div class="name">新乡职业技术学院评教系统</div>
      </div>
      <van-swipe class="banner" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.id">
          <img :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="content">
      <router-view @show="changeTab"></router-view>
    </div>
    <div class="nav">
      <!-- <van-tabbar v-model="active" @change="onChange">
        <van-tabbar-item name="statisticsList" icon="home-o">
          评教结果
        </van-tabbar-item>
        <van-tabbar-item name="typeFilter" icon="search">
          类型搜索
        </van-tabbar-item>
        <van-tabbar-item name="user" icon="user-o"> 我的评价 </van-tabbar-item>
      </van-tabbar> -->
      <van-tabbar route>
        <van-tabbar-item replace to="/dingding/statisticsList" icon="home-o">评教结果</van-tabbar-item>
        <van-tabbar-item replace to="/dingding/user" icon="search">我的评价</van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- 登录模态框 -->
    <!-- 未绑定账号遮罩层 -->
    <van-overlay
      :show="overlayIsShow_bind"
    >
      <div class="wrapper" @click.stop>
        <div class="block">
          <van-form>
            <van-cell-group>
              <van-cell title="新乡职业技术学院评教系统"> </van-cell>
              <van-cell v-show="!haveName">
                <van-notice-bar
                  color="#1989fa"
                  background="#ecf9ff"
                  left-icon="info-o"
                >
                  第一次使用请绑定工号
                </van-notice-bar>
              </van-cell>
            </van-cell-group>
            <van-cell-group>
              <van-cell>
                <van-field
                  v-model="jobNO"
                  label="工号："
                  placeholder="请输入工号"
                  :disabled="disableInput"
                  :rules="[{ pattern, message: '输入格式不正确' }]"
                />
              </van-cell>
              <van-cell>
                <van-field
                  v-model="confirmNO"
                  label="确认号码："
                  placeholder="再次确认工号或者学号确认"
                  :disabled="disableInput"
                  :rules="[{ validator, message: '输入不正确,请确认' }]"
                />
              </van-cell>
            </van-cell-group>
            <van-cell-group>
              <van-cell v-show="haveName">
                <van-notice-bar
                  color="##ed6a0c"
                  background="#fffbe8"
                  left-icon="info-o"
                >
                  对应的姓名是：<span
                    style="font-weight: bold; margin-right: 30px"
                  >
                    {{ userName }}
                  </span>
                  请确认后绑定！
                </van-notice-bar>
              </van-cell>
              <van-cell>
                <div style="margin: 16px">
                  <van-button
                    round
                    block
                    type="info"
                    native-type="submit"
                    v-show="formState"
                    @click="findName"
                    >提交信息</van-button
                  >
                  <van-button
                    round
                    block
                    type="primary"
                    native-type="submit"
                    v-show="!formState"
                    @click="goToBind"
                    >绑定钉钉</van-button
                  >
                  <van-button
                    round
                    block
                    type="warning"
                    native-type="warning"
                    v-show="!formState"
                    @click="resetForm"
                    style="margin-top: 10px"
                    >重新输入</van-button
                  >
                </div>
              </van-cell>
            </van-cell-group>
          </van-form>
        </div>
      </div>
    </van-overlay>
    <!-- 未选择账号遮罩层 -->
</div>

</template>
<script>
import bg1 from "@/assets/images/bg1.png";
import logo from "@/assets/logo/logo.png";
import * as dd from "dingtalk-jsapi"; // 导入钉钉api
import { getCodeToken } from "@/api/login";
import { bindUser } from "@/api/login";
import { getUserName } from "@/api/login";
import { getUserProfile } from "@/api/system/user";
import { Toast, Dialog } from "vant";
export default {
name: "Index",
data() {
  return {
    user: null, //登录用户信息
      leaderFlag: false, //当前角色 是否是领导
      corpId: "ding26f4f2c0f596b8ba35c2f4657eb6378f", //团队id  根据学生教师角色不同赋予不同的值
      logo: logo,
      bannerList: [
        //顶部图片列表
        { id: 1, img: bg1 },
        { id: 2, img: bg1 },
        { id: 3, img: bg1 },
      ],
      value: "", //搜索框的值
      showPopover: false,
      actions: [
        { text: "待评价" },
        { text: "已评价" },
        { text: "已结束" },
        { text: "评教师", disabled: true },
        { text: "评课程", disabled: true },
        { text: "评学生", disabled: true },
      ],
      istNumber: 3, //列表内待评价问卷数量
      active: 0, //底部导航索引
      overlayIsShow_bind: true, //控制绑定角色遮罩层是否显示
      haveName: false, //控制姓名提示是否显示
      userName: "", //后端返回的用户名
      jobNO: "", //工号
      confirmNO: "", //确认工号
      role: 1, //登录角色 1：表示教师，2：表示学生，默认为 2
      disableInput: false, //禁止输入
      pattern: /^(\w){4,20}$/, //学号判断规则，只能输入4-20个字母、数字、下划线
      formState: true, //表单状态 true查询姓名  false 进行绑定
  }
},
created() {
    this.ddLogin();
    // this.getUser();
    this.$emit("show", 0); //传递给父组件改变tab的激活active样式
    // 将所有 Toast 的展示时长设置为 500 毫秒
    Toast.setDefaultOptions({ duration: 500 });
  },
methods: {
   async ddLogin() {
    let that=this
      dd.runtime.permission
        .requestAuthCode({
          corpId: this.corpId, // 企业id
          onSuccess: function (info) {
            console.log();
            that.$store
              .dispatch("DdLogin", { code: info.code, roleFlag: that.role })
              .then(() => {
                that.overlayIsShow_bind = false;
                console.log("准备跳转",that.overlayIsShow_bind);
                that.$router
                  .push({ path: "/dingding/user" })
                  .catch(() => {});
              })
              .catch((err) => {
                console.log(err);
              });
          },
        })
        .catch((err) => {
          Dialog({ message: "请通过钉钉应用访问" });
          console.log(err);
        });
    },
    findName() {
      getUserName(this.role, this.jobNO)
        .then((res) => {
          console.log("res findName", res);
          this.userName = res.msg;
          this.haveName = true;
          this.formState = false;
          this.disableInput = true;
        })
        .catch((error) => {
          console.log(error.message);
        });
    },
    goToBind() {
      console.log("goto bind");
      let that = this;
      dd.runtime.permission
        .requestAuthCode({
          corpId: this.corpId, // 企业id
          onSuccess: function (info) {
            console.log("bind", that.role, that.jobNO, info.code);
            let bindData = {
              role: that.role,
              userNO: that.jobNO,
              code: info.code,
            };
            //绑定工号和userId
            that.$store
              .dispatch("BindeAndLogin", bindData)
              .then(() => {
                that.overlayIsShow_bind = false;
                that.$router
                  .push({ path: "/dingding/user" })
                  .catch(() => {});
              })
              .catch((err) => {
                console.log(err);
              });
          },
        })
        .catch((err) => {
          Dialog({ message: "请通过钉钉应用访问" });
          console.log(err);
        });
    },
    resetForm() {
      this.userName = "";
      this.haveName = false;
      this.formState = true;
      this.disableInput = false;
    },
    validator(val) {
      if (/^(\w){4,20}$/.test(val) && this.jobNO == this.confirmNO) {
        return true;
      } else {
        return false;
      }
    },
    onSearch(val) {
      //顶部搜索框搜索
      Toast(val);
    },
    onFilter(action) {
      console.log((this.$refs.top.style.height = "18rem"));
      //顶部搜索框筛选
      Toast(action.text);
    },
    changeTab(index) {
      if(index>=0){
        this.active = index;
        this.bannerShow=true
      this.searchShow=true
      }else{
        this.bannerShow=false
      this.searchShow=false
      }

    },
    onChange(index) {
      //底部tabbar改变
      console.log("跳转index",index);
      this.$router.push({ path: index });
    },
    },
}
</script>

<style  rel="stylesheet/scss" lang="scss">
.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
}

.top .title {
  height: 3rem;
  background-color: white;
  display: flex;
  padding: 0.5rem;
}
.top .title .logo {
  height: 2rem;
  width: 2rem;
}
.top .title .logo img {
  margin: 0px auto;
  height: 2rem;
  width: 2rem;
}
.top .title .name {
  color: #444f6f;
  flex: 1;
  font-size: 13pt;
  font-weight: bolder;
  line-height: 2rem;
  padding-left: 0.5rem;
}
.top .banner {
  height: 8rem;
}
.top .banner img {
  height: 100%;
  width: 100%;
}
.search-btn {
  margin: 0 10px;
  border: 1px solid #ccc;
  border-radius: 10%;
  line-height: 34px;
  padding: 5px;
}
.content {
  flex: 1;
  width: 100%;
  height: 50vh;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: scroll;
  // 设置滚动条宽带为0隐藏滚动条
  &::-webkit-scrollbar {
    width: 0;
  }
}
.nav {
  margin: 0px auto;
  max-width: 1200px;
  width: 100%;
  height: 3.5rem;
}
// 遮罩层样式
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.selectRoll {
  line-height: 24px;
  font-size: 14px;
  color: #646566;
  padding-right: 22px;
}
.block {
  max-width: 400px;
  max-height: 600px;
  width: 90%;
  height: 70%;
  background-color: #fff;
}
</style>